<template>
  <el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="box-card pointer" shadow="hover">
          <p class="gray">总充值额</p>
          <p class="home-number">{{ recharge.totalRecharge }}</p>
          <div class="number-list">
            <span>本周总数 {{ recharge.weekRecharge }}</span>
            <span>本月总数 {{ recharge.monthRecharge }}</span>
          </div>
        </el-card>
        <el-card class="box-card pointer" shadow="hover">
          <p class="gray">总电表数</p>
          <p class="home-number">{{ deviceCount.totalDeviceCount }}</p>
          <div class="number-list">
            <span>本周总数 {{ deviceCount.weekDeviceCount }}</span>
            <span>本月总数 {{ deviceCount.monthDeviceCount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <div id="map-container"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card echarts-card pointer" shadow="hover">
          <div slot="header" class="header-wrapper flex align-center">
            <el-tabs tab-position="bottom" v-model="activeName">
              <el-tab-pane label="平台流水" name="first"></el-tab-pane>
            </el-tabs>
            <el-date-picker
              v-model="datePicker"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeDate"
            ></el-date-picker>
          </div>
          <div class="home-echarts" id="homeEachrts"></div>
        </el-card>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import echarts from "echarts";
import { dateFormat } from "@/util/date";
import {
  getRecharge,
  getDeviceCount,
  getEchartData,
  getCustorList,
} from "@/api/wel/index";
export default {
  data() {
    return {
      datePicker: ["2020-08-01", "2020-09-02"],
      activeName: "first",
      recharge: {
        totalRecharge: "--",
        monthRecharge: "--",
        weekRecharge: "--",
      },
      deviceCount: {
        monthDeviceCount: "--",
        totalDeviceCount: "--",
        weekDeviceCount: "--",
      },
      xAxis: [],
      series: [],
      markers: [],
      infoWindow: null,
      map: null,
      line: {
        instance: null,
      },
    };
  },
  watch: {
    datePicker(value) {
      console.log("datePicker");
      getEchartData(value[0], value[1]).then((res) => {
        console.log(res.data.data);
        let arr = Object.keys(res.data.data);
        this.xAxis = arr;
        this.xAxis = arr;
        this.series = arr.map((item) => {
          return res.data.data[item];
        });
        this.line.instance.setOption(this.getLineOpt());
      });
    },
  },
  created() {
    this.getAjaxData();
  },
  mounted() {
    this.initLineChart();
    this.getCurrentMonthFirst();
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("map-container", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        center: [116.397428, 39.90923], //初始化地图中心点
      });
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true,
        offset: new AMap.Pixel(0, -60),
      });
      // 地图打点
      getCustorList().then((res) => {
        const data = res.data.data;
        this.markers = data;
        this.initMarkers();
      });
    },
    initMarkers() {
      const { markers } = this;
      console.log(markers);
      let update_markers = [];
      for (let item of markers) {
        let marker = new AMap.Marker({
          position: new AMap.LngLat(item.longitude, item.latitude),
        });
        marker.content = `<div class="windows-wrap">${item.customerName}</div>`;
        marker.on("mouseover", this.markerOver);
        marker.on("mouseout", this.makerOut);
        marker.on("mouseup", () => {
          this.makerOut();
        });
        marker.on("click", this.showStreet);
        update_markers.push(marker);
      }
      this.map.add(update_markers);
      this.map.setFitView(); 
    },
    markerOver(e) {
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    makerOut() {
      this.infoWindow.close();
    },
    // 初始化日期
    getCurrentMonthFirst() {
      var date = new Date();
      date.setDate(1);
      console.log(" date.setDate(1);", date.getDate(1));
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.datePicker = [
        date.getFullYear() + "-" + month + "-" + day,
        dateFormat(new Date(), "yyyy-MM-dd"),
      ];
    },
    changeDate(value) {
      // console.log(this.datePicker)
    },
    getAjaxData() {
      const { datePicker } = this;
      getRecharge().then((res) => {
        if (!res.data.data) return;
        this.recharge = { ...res.data.data };
      });
      getDeviceCount().then((res) => {
        if (!res.data.data) return;
        this.deviceCount = { ...res.data.data };
      });
      getEchartData(datePicker[0], datePicker[1]).then((res) => {
        console.log(res.data.data);
        let arr = Object.keys(res.data.data);
        this.xAxis = arr;
        this.xAxis = arr;
        this.series = arr.map((item) => {
          return res.data.data[item];
        });
        this.line.instance.setOption(this.getLineOpt());
      });
    },
    initLineChart() {
      var dom = document.getElementById("homeEachrts");
      this.line.instance = echarts.init(dom, {
        renderer: "svg", // 支持 'canvas' 或者 'svg'
        width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
        height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
      });
      this.line.instance.setOption(this.getLineOpt());
      var self = this;
      window.addEventListener("resize", function () {
        self.line.instance.resize();
      });
    },
    getLineOpt() {
      const { xAxis, series } = this;
      var option = {};
      option = {
        color: ["#409EFF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ["line", "bar"] },
            // restore: { show: true },
            // saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["平台流水"],
        },
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "流水",
            min: 0,
            interval: 200,
            axisLabel: {
              formatter: "{value}元",
            },
          },
        ],
        series: [
          {
            name: "流水",
            type: "bar",
            barWidth: 20,
            data: series,
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  height: 220px;
  border: 1px solid #e6ebf5;
  text-align: center;
}
.home-number {
  color: #000;
  font-size: 34px;
  font-weight: 400;
  padding-bottom: 18px;
  margin: 0;
}
.number-list {
  padding-bottom: 21px;
  span {
    display: block;
    line-height: 30px;
  }
}
.card-footer {
  margin: 0;
  padding-top: 10px;
}
.header-wrapper {
  justify-content: space-between;
}
.home-echarts {
  width: 100%;
  height: 330px;
}
// 新增地图部分
.echarts-card {
  height: auto;
}
#map-container {
  width: 100%;
  height: 444px;
}
</style>
<style>
.windows-wrap {
  color: #666;
  padding: 10px;
  line-height: 30px;
  background: #fff;
  border-radius: 10px;
}
</style>
